<!-- 角色用户列表 -->
<template>
<div class="role-user-list-wp com-main _table-wp" v-loading="loadInterface > 0" element-loading-text="拼命加载中">
  <com-search :form="form" :showAdvanced="false" @search="search()">
    <template slot-scope="scope">
      <el-form-item label="用户账号" prop="username">
        <el-input v-model="form.username" clearable></el-input>
      </el-form-item>
    </template>
  </com-search>

  <div class="com-hd-box">
    <el-button size="small" icon="el-icon-plus" type="primary" @click="$refs.userInfo.open(1, null, roleId)">用户录入</el-button>
    <el-button size="small" icon="el-icon-plus" type="primary" @click="$refs.addExistsUser.open(roleId)">添加已有用户</el-button>
    <el-button v-show="selection.length" size="small" icon="el-icon-delete" @click="handleBatchDelete()">批量删除</el-button>
  </div>

  <div class="com-check-box">
    <span class="text com-mr20">当前选择 <b>{{selection.length}}</b> 项</span>
    <el-link class="btn" type="primary" :underline="false" @click="handleClearSelection()">清空</el-link>
  </div>

  <div class="table-box">
    <el-table ref="table" :data="table.data"
      border
      size="medium"
      :header-cell-style="{'background-color': '#fafafa'}"
      row-key="id"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
        align="center"
        reserve-selection>
      </el-table-column>
      <el-table-column v-for="(item, index) in table.head" :key="index"
        :prop="item.key"
        :label="item.name"
        :width="item.width"
        :formatter="item.formatter"
        :default-sort = "{prop: 'createTime', order: 'descending'}"
        align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <div class="_td-hd-box" slot-scope="scope">
          <el-link class="com-mr10" size="medium" type="primary" :underline="false" @click="$refs.userInfo.open(2, scope.row)">编辑</el-link>
          <el-dropdown size="medium" placement="bottom">
            <el-link size="medium" type="primary" :underline="false">更多<i class="el-icon-arrow-down el-icon--right"></i></el-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><div @click="handleDelete(scope.row.id)">删除</div></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-table-column>
    </el-table>
    <com-page :page="page" @change="changePage"></com-page>
  </div>

  <!-- 用户弹窗 -->
  <user-info ref="userInfo" @reload="loadData()"></user-info>
  <!-- 添加已有用户 -->
  <add-exists-user ref="addExistsUser" @reload="loadData()"></add-exists-user>
</div>
</template>
<script>

import userInfo from "@/dialogs/system/user/user-info.vue";
import addExistsUser from "@/dialogs/system/role/add-exists-user.vue";
import TableMixin from "@/mixins/TableMixin.js";
import {user} from "@/config/api.js";

export default {
  mixins: [TableMixin],
  components: {
    userInfo,
    addExistsUser,
  },
  data () {
    return {
      form: {
        username: '',
        roleId: '',
        column: 'createTime',
        order: 'desc'
      },
      
      table: {
        head: [
          {name: '用户账号', key: 'username'},
          {name: '用户名称', key: 'realname'},
          {name: '状态', key: 'status_dictText'},
        ],
        data: []
      },

      // 当前的url
      url: {
        list: user.userRoleList,
        delete: user.delete,
        deleteBatch: user.deleteBatch
      }
    }
  },
  props: {
    // 当前角色的id
    roleId: {
      default: ''
    }
  },
  watch: {
    roleId () {
      this.search();
    }
  },
  methods: {
    // 查询时配置form表单
    formatForm () {
      this.form.roleId = this.roleId;
      return this.form;
    }
  }
}
</script>
<style lang="scss" scoped>
.role-user-list-wp {
  min-height: 600px;
}
</style>